@contentful/f36-popover

title: 'Popover' slug: /components/popover/ github: 'https://github.com/contentful/forma-36/tree/main/packages/components/popover' storybook: 'https://f36-storybook.contentful.com/?path=/story/components-popover--basic' typescript: ./src/Popover.tsx

Popover is used to display some content on top of another, and should be paired with a clickable trigger element. It is a base for other more specific component, like Menu, Autocomplete and Multiselect. Please, consider using these specific componenets to cover your needs.

How to use Popover

• Only if Menu, Autocomplete and Multiselect components are not covering your use cases, you should use Popover.
• Before using this component, double-check your design requirements. We are providing Menu, Autocomplete, and Multiselect for more specific use-cases and they can address your needs.
• Keep in mind that you will have to implement everything related to accessibility for the popover content.
• Component is controllable, so don't forget to pass onClose callback prop. Otherwise closeOnEsc and closeOnBlur will not work properly.

Import

import { Popover } from '@contentful/f36-components';
// or
import { Popover } from '@contentful/f36-popover';

Examples

Basic

• Pass trigger component as a child for Popover.Trigger. NOTE: 🚨 Ensure that the component that you pass accepts ref. Consider using forwardRef for functional components.
• Pass popover content as a child for Popover.Content

Trapping focus within Popover

If the popover contains interactive elements that user can navigate through with Tab, consider using react-focus-lock to trap the focus within Popover

Props (API reference)

Content guidelines

• Use an interactive element such as button for Popover.Trigger

We strongly recommend using an interactive element such as "button" for "Popover.Trigger", but if you need to use a non-interactive element, like "div", you should make that element focusable by providing "tabindex='0'".

Accessibility

• If the popover contains interactive elements that user can navigate through with Tab, consider using react-focus-lock to trap the focus within Popover
• When the popover is opened, focus is moved to the Popover.Content. If you set autoFocusto false, it will not move the focus.
• When the popover is open and focus is within the Popover.Content, click on Esc key will close the popover. If you set closeOnEsc to false, it will not close.
• When the popover is open and focus is within the Popover.Content, click outside popover or blurring out will close the it. If you set closeOnBlur to false, it will not close.
• All the necessary a11y attributes for Popover.Content and Popover.Trigger are provided.